<!DOCTYPE html>
<html lang="zh">
<head>
    <title>文件浏览</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/js/layui.js"></script>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <style>
        body {
            background-color: #f2f1f1;
            background-repeat:no-repeat;
            background-attachment:fixed

        }
        .global-body {
            width: 100%;
            margin: 2% 4%;
        }
        .mButton {
            cursor: pointer;
            text-decoration : underline;
            font-size: 16px;
        }
        .mButton2 {
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
{{template "header" .}}
<body>
<div class="global-body">
    {{if .HostId}}
        <div id="HostId" class="val" val="{{.HostId}}"></div>
    {{else}}
        <div id="HostId"></div>
    {{end}}
    <div style="width: 80%;margin-left: 4%">
        <div>
            <form class="layui-form" id="editFrom" style="margin-bottom: 20px">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 380px;min-height: 36px">
                        <select name="host" lay-verify="required" id="host">
                            <option value=""></option>
                            {{range .Hosts}}
                                <option value="{{.Id}}">{{.Name}}</option>
                            {{end}}
                        </select>
                    </div>
                    <button id="browse" style="width: 110px" type="button" class="layui-input-inline layui-btn layui-btn-primary ">浏览</button>
                    <button id="upload" style="width: 110px;margin-left: 20px" type="button" class="layui-input-inline layui-btn layui-btn-primary ">上传</button>
                </div>
            </form>
        </div>
        <div>
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>大小</th>
                    <th>修改时间</th>
                    <th>文件名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="fileList">
                </tbody>
            </table>
        </div>

    </div>

    <form style="display: none" class="layui-form" enctype="multipart/form-data" id="uploadForm">
        <div class="layui-input-inline" style="width: 42%">
            <input onchange="uploadFile()" id="selectFile" type='file' name="files" style="min-height: 30px;width: 230px;align-items: center;" multiple>
        </div>
        <input id="fromRemote" name="remote" type="text" class="layui-input">
        <input id="fromId" name="id" type="text" class="layui-input">
        <input name="type" type="text" value="host" class="layui-input">
    </form>

    <script>
        var remoteValue = $("#fromRemote")
        function uploadFile() {
            var hostId = $("#host").val();
            var path = remoteValue.val()
            $("#fromId").val(hostId);
            var formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                "url" : "/tools/upload",
                "type" : "post",
                "data" : formData,
                "success" : callBack,
                "contentType": false,
                "processData": false,
                "error" : function(err) {
                    console.log(err)
                }
            });
            function callBack(data) {
                if (path.charAt(path.length-1) !== "/") {
                    path += "/"
                }
                if (data.code === "200"){
                    browseFunc(path);
                }else {
                    layer.msg("delete file error");
                }
                $("#selectFile").val(null)
            }
        }
        $("#upload").click(function () {
            $("#selectFile").click()
        })
        function getLastPath(path) {
            var args = path.split("/");
            var pathNew = "";
            for (var i=0;i<args.length-2;i++) {
                if (args[i] === ""){
                    continue
                }
                pathNew = pathNew + "/" + args[i]
            }
            if (pathNew === "")
            {
                return "/"
            }
            return pathNew
        }
        $("#browse").click(function () {
            var hostId = $("#host").val();
            var path = "/";
            $.ajax({
                "url" : "/tools/browse",
                "type" : "get",
                "data": {
                    "id": hostId,
                    "path": path
                },
                "success" : callBack,
                "error" : function(err) {
                    console.log(err);
                }
            });
            function callBack(data) {
                if (path.charAt(path.length-1) !== "/") {
                    path += "/"
                }
                remoteValue.val("/")
                $("#fileList tr").remove();
                if (data.data !== null) {
                    for(var index=0;index < data.data.length;index++){
                        var i = data.data[index];
                        var addr = !i.IsDir ? "href=\"/tools/download?id="+hostId+"&path="+path+i.Name + "\" target=\"_blank\" class=\'mButton2\' onclick='' " : "";
                        var tagStr ="<tr><td>"+ i.Size +"</td>" +
                            "<td>"+ i.ModTime +"</td>" +
                            "<td><a " + addr + " onclick='browseFunc(\"" + path + i.Name + "\")' class=\"mButton\">" + i.Name + "</a></td>" +
                            "<td><a class=\"mButton2\" onclick='deleteFunc(\"" + path + i.Name + "\")'>删除</a></td>" +
                            "</tr>";
                        $("#fileList").append(tagStr);
                    }
                }
            }
        });
        function deleteFunc(path) {
            var hostId = $("#host").val();
            layer.confirm("确认要删除吗，删除后不能恢复", {title: "删除确认"}, function (index) {
                $.ajax({
                    "url": "/tools/delete",
                    "type": "post",
                    "data": {
                        "id": hostId,
                        "path": path
                    },
                    "success": callBack,
                    "error": function (err) {
                        console.log(err)
                    }
                });

                function callBack(data) {
                    if (path.charAt(path.length-1) !== "/") {
                        path += "/"
                    }
                    if (data.code === "200"){
                        browseFunc(getLastPath(path));
                    }else {
                        layer.msg("delete file error");
                    }
                    layer.close(index);
                }
            });
        }
        function browseFunc(path) {
            var hostId = $("#host").val();
            $.ajax({
                "url" : "/tools/browse",
                "type" : "get",
                "data": {
                    "id": hostId,
                    "path": path
                },
                "success" : callBack,
                "error" : function(err) {
                    console.log(err);
                }
            });
            function callBack(data) {
                if (data.code !== "200") {
                    layer.msg("download file error!");
                    return
                }
                $("#fileList tr").remove();
                if (path.charAt(path.length-1) !== "/") {
                    path += "/"

                }
                var pathNew = getLastPath(path);
                remoteValue.val(path);
                var tagStr ="<tr><td>0</td>" +
                    "<td>----</td>" +
                    "<td><a onclick='browseFunc(\"" + pathNew + "\")' class=\"mButton\">上一页</a></td></tr>";
                $("#fileList").append(tagStr);
                if (data.data !== null) {
                    for(var index=0;index < data.data.length;index++){
                        var i = data.data[index];
                        var addr = !i.IsDir ? "href=\"/tools/download?id="+hostId+"&path="+path+i.Name + "\" target=\"_blank\" class=\'mButton2\' onclick='' " : "";
                        var tagStr ="<tr><td>"+ i.Size +"</td>" +
                            "<td>"+ i.ModTime +"</td>" +
                            "<td><a " + addr + " onclick='browseFunc(\"" + path + i.Name + "\")' class=\"mButton\">" + i.Name + "</a></td>" +
                            "<td><a class=\"mButton2\" onclick='deleteFunc(\"" + path + i.Name + "\")'>删除</a></td>" +
                            "</tr>";
                        $("#fileList").append(tagStr);
                    }
                }
            }
        }
    </script>
</div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
    //From
    layui.use('form', function(){
        var form = layui.form;
    });
</script>
</body>
</html>
